<!--
 * @description 小组管理
 * @author dumeng
 * @date 2021/9/17
 -->
<template>
  <div class="xqxz-group-manage-page">
    <split-pane split="vertical" :min-percent="0" :default-percent="28">
      <template slot="paneL">
        <div class="left-Wrap">
          <div class="search-wrap" style="margin-bottom: -10px;">
            <el-input v-model="groupName" placeholder="按小组名称搜索" />
          </div>
          <div class="search-wrap">
            <el-select v-model="classifyId" placeholder="请选择分类搜索" style="width: 80%;" @change="classChange">
              <el-option v-for="(item, index) in groupCategory" :key="index" :label="item.classifyName" :value="item.id" />
            </el-select>
            <el-button class="filter-item" type="primary" @click="handleFilterGroup">搜索</el-button>
          </div>
          <div class="group-list">
            <div class="title">
              <span>小组列表</span>
              <el-button type="primary" @click="handleCreate">新建小组</el-button>
            </div>
            <div v-if="groupList.length===0 && !listLoading" class="empty"> 暂无数据</div>
            <div v-infinite-scroll="onLoad" v-loading="listLoading" :infinite-scroll-delay="1000">
              <div
                v-for="(ite,n) in groupList"
                :key="n"
                :class="{ 'active': ite.id == curSelectGroupId }"
                class="group-item"
                @click="getGroupInfo(ite.id,ite)"
              >
                <p class="group-name">
                  {{ ite.groupName }}
                  <span v-if="ite.groupStatus==='DISBANDED'">
                    <span style="color: red;">(已解散) </span>
                  </span>
                </p>
                <span class="playbtn">
                  <i class="el-icon-d-arrow-right" />
                </span>
              </div>
            </div>

          </div>
        </div>
      </template>
      <template slot="paneR">
        <div v-if="!isShow" class="ts-con">
          <div class="ts">
            <i class="el-icon-info" />
            <span v-html="showMsg" />
          </div>
        </div>
        <el-main v-else class="group-main">
          <div class="classify-tab">
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
              <el-tab-pane
                v-for="item in tabOptions"
                :key="item.id"
                :label="item.name"
                :name="item.id"
              />
            </el-tabs>
          </div>
          <div class="tab-container">
            <div v-if="activeTab === '1'" class="group-base-info">
              <el-row>
                <el-col class="group-info-item" :span="24"><span class="label">小组logo：</span><el-image class="group-logo" :src="view + groupInfo.groupLogo" /></el-col>
                <el-col class="group-info-item" :span="12"><span class="label">小组名称：</span>{{ groupInfo.groupName }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">所属分类：</span>{{ groupInfo.classifyName }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">组长：</span>{{ groupInfo.leaderName }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">小组人数：</span>{{ groupInfo.groupUserNum||'0' }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">成立时间：</span>{{ groupInfo.groupEstablished }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">已发布活动数量：</span>{{ groupInfo.groupActivityPublishNum||'0' }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">正在进行活动数量：</span>{{ groupInfo.groupActivityOngoingNum||'0' }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">累计报名人数：</span>{{ groupInfo.cumulativeSignUpNum||'0' }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">小组可见范围：</span>{{ getVisualName(groupInfo.isVisual) }}</el-col>
                <!--                <el-col class="group-info-item" :span="12"><span class="label">是否置顶：</span>{{ groupInfo.isTop==='0'?'否':'是' }}</el-col>-->
                <el-col class="group-info-item" :span="12"><span class="label">启用/禁用状态：</span>{{ groupInfo.statusValue }}</el-col>
                <el-col class="group-info-item" :span="12"><span class="label">小组状态：</span>{{ groupInfo.groupStatusValue }}</el-col>
                <el-col class="group-info-item desc-wrap" :span="24"><span class="label">小组简介： </span>{{ groupInfo.groupSummary }} </el-col>
                <el-col class="group-info-item center" :span="24">
                  <el-button style="padding: 8px 30px;" type="primary" :disabled="disable" @click="handlePublish">{{ groupInfo.status === "ZT01" ? "禁用" : "启用" }}</el-button>
                  <el-button style="padding: 8px 30px;" type="primary" :disabled="disable" @click="handleUpdate">编辑</el-button>
                  <el-button style="padding: 8px 30px;" type="primary" :disabled="disable" @click="handleDelete">删除</el-button>
                </el-col>
              </el-row>
            </div>
            <group-members v-else-if="activeTab === '2'" :key="gmsTime" :group-id="curSelectGroupId" />
            <activity-manage v-else-if="activeTab === '3' " :key="amTime" :gi="curSelectGroupId" :ci="classifyId" :gn="groupName" :am-tab="amTab" :tab="activeTab" :group-id="curSelectGroupId" />
            <group-manager v-else-if="activeTab === '4'" :key="gmTime" :group-id="curSelectGroupId" />
            <funds-manage v-else-if="activeTab === '5'" :key="fmTime" :ci="classifyId" :gn="groupName" :fm-tab="fmTab" :tabf="activeTab" :group-id="curSelectGroupId" />
          </div>
        </el-main>
      </template>
    </split-pane>
  </div>
</template>

<script>
import waves from '@/directive/waves' // Waves directive
import splitPane from 'vue-splitpane'
import { getGroupList, del, updateState, getClassifyTree, get } from '../api/groupManage'
import activityManage from './activityManage'
import groupMembers from '../components/groupMembers'
import fundsManage from './fundsManage'
import groupManager from '../components/groupManager'
import { mapGetters } from 'vuex'
export default {
  name: 'XqxzGroupManage',
  components: { splitPane, groupMembers, activityManage, fundsManage, groupManager },
  directives: { waves },
  data() {
    return {
      isShow: false,
      showMsg: '单击左侧菜单项进行维护',
      groupName: '',
      classifyId: '',
      groupCategory: [
        {
          classifyName: '全部',
          id: ''
        }
      ],
      listLoading: false,
      page: 1,
      pageSize: 20,
      total: 0,
      finished: false,
      groupList: [],
      curSelectGroupId: '',
      tabOptions: [
        {
          name: '基本信息',
          id: '1'
        },
        {
          name: '成员信息',
          id: '2'
        },
        {
          name: '活动信息',
          id: '3'
        },
        {
          name: '管理员信息',
          id: '4'
        },
        {
          name: '经费信息',
          id: '5'
        }
      ],
      activeTab: '1',
      view: '/API-DOCUMENT/document/file/download?id=',
      groupInfo: {},
      gmsTime: new Date().getTime(),
      amTime: new Date().getTime() + 1,
      gmTime: new Date().getTime() + 2,
      fmTime: new Date().getTime() + 3,
      amTab: '1',
      fmTab: 'AUDITRESULT01',
      disable: false
    }
  },
  computed: {
    ...mapGetters([
      'backUrl'
    ])
  },
  created() {
    if (this.$route.query.amTab) {
      this.amTab = this.$route.query.amTab
    }
    if (this.$route.query.fmTab) {
      this.fmTab = this.$route.query.fmTab
    }
    this.getClassifyOption()
  },
  methods: {
    /*
    * 可见范围
    * */
    getVisualName(val) {
      let name = '不登录也可见'
      switch (val) {
        case '1':
          name = '注册用户可见'
          break
        case '2':
          name = '认证用户可见'
          break
        case '3':
          name = '小组成员可见'
          break
      }
      return name
    },
    /*
    * 分类改变时触发
    * */
    classChange(val) {
      this.isShow = false
      this.activeTab = '1'
      this.curSelectGroupId = ''
      this.gmsTime = new Date().getTime()
      this.amTime = new Date().getTime() + 1
      this.gmTime = new Date().getTime() + 2
      this.fmTime = new Date().getTime() + 3
      this.getGroupList()
    },
    /**
     * 获取分类
     */
    getClassifyOption() {
      return new Promise((resolve, reject) => {
        getClassifyTree({ classifyType: 'HDFL_XQXZ' }).then(({ data }) => {
          this.groupCategory = [...this.groupCategory, ...data.data]
          if (this.$route.query.gn) { // 是否有小组名称
            this.groupName = this.$route.query.gn
          }
          if (this.$route.query.ci) { // 是否有类型
            this.classifyId = this.$route.query.ci
          }
          if (this.$route.query.tab) { // 当前选择的tab
            this.activeTab = this.$route.query.tab + ''
          }
          if (this.$route.query.gi) {
            this.curSelectGroupId = this.$route.query.gi
            this.isShow = true
          }
          if (this.$route.query.gi && this.activeTab === '1') { // 如果有选择的小组，并且是详情就去获取详情
            this.getData()
          }

          if (this.$route.query.c) {
            this.classifyId = this.$route.query.c
          }
          this.getGroupList()
        }).catch(error => {
          reject(error)
        })
      })
    },
    getGroupList() {
      return new Promise((resolve, reject) => {
        this.page = 1
        this.listLoading = true
        getGroupList({ page: this.page, pageSize: this.pageSize, classifyId: this.classifyId, groupName: this.groupName }).then(res => {
          this.listLoading = false
          res = res.data
          if (res && res.code === '200') {
            this.groupList = res.data.rows || []
            this.total = res.data.total
            if (this.groupList.length < this.pageSize || this.groupList.length >= this.total) {
              this.finished = true
            } else {
              this.finished = false
            }
            this.page++
            resolve()
          } else {
            reject()
          }
        }).catch(() => {
          this.finished = true
          this.listLoading = false
          reject()
        })
      })
    },
    onLoad() {
      if (this.finished && this.page === 1) {
        return
      }
      if (this.finished) {
        return
      }
      this.listLoading = true
      getGroupList({ page: this.page, pageSize: this.pageSize, classifyId: this.classifyId, groupName: this.groupName }).then(res => {
        this.listLoading = false
        res = res.data
        if (res && res.code === '200') {
          const _list = res.data.rows || []
          this.groupList = [...this.groupList, ..._list]
          this.total = res.data.total || 0
          if (_list.length < this.pageSize || this.groupList.length >= this.total) {
            this.finished = true
            return
          } else {
            this.page++
          }
        }
      }).catch(() => {
        this.finished = true
        this.listLoading = false
      })
    },
    /**
     * 搜索小组
     */
    handleFilterGroup() {
      this.getGroupList()
    },
    getGroupInfo(id, ite) {
      this.curSelectGroupId = id
      this.isShow = true
      this.gmsTime = new Date().getTime()
      this.amTime = new Date().getTime() + 1
      this.gmTime = new Date().getTime() + 2
      this.fmTime = new Date().getTime() + 3
      this.getData()
    },
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get(this.curSelectGroupId).then(res => {
          loading.close()
          if (res.data.code === '200') {
            this.groupInfo = res.data.data
            if (this.groupInfo.groupStatus && this.groupInfo.groupStatus === 'DISBANDED') {
              this.disable = true
            } else {
              this.disable = false
            }
          }
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    handleTabClick(tab) {
      if (tab.index === '0') {
        this.getData()
      }
    },
    handlePublish() {
      this.$confirm(this.groupInfo.status === 'ZT01' ? '确认禁用？' : '确认启用？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateState({ id: this.groupInfo.id, status: this.groupInfo.status === 'ZT01' ? 'ZT02' : 'ZT01' }).then(res => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getData()
          }
        })
      }).catch(() => {

      })
    },
    handleCreate() {
      this.$router.push({ path: this.$filterPath('groupCreate'), query: { gi: this.groupInfo.id, t: 'create', ci: this.classifyId, tab: this.activeTab, gn: this.groupName }})
    },
    handleUpdate() {
      this.$router.push({ path: this.$filterPath('groupCreate'), query: { gi: this.groupInfo.id, t: 'update', ci: this.classifyId, tab: this.activeTab, gn: this.groupName }})
    },
    handleDelete() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteGroup(this.groupInfo.id)
      }).catch(() => {
      })
    },
    deleteGroup(id) {
      del(id).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
        this.isShow = false
        this.curSelectGroupId = ''
        this.groupInfo = {}
        this.activeTab = '1'
        this.getGroupList()
      })
    }
  }

}
</script>

<style lang="scss">
  .xqxz-group-manage-page{
    height: calc(100vh - 64px);
    padding: 10px;
    overflow: hidden;
    .vue-splitter-container {
      width: 100%;
      overflow: hidden;
    }
    .left-Wrap {
      height: 100%;
      background: #fff;
      overflow-y: auto;
      .search-wrap {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .filter-item {
          padding: 10px 18px;
          margin-left: 10px;
        }
      }
      .group-list {
        font-size: 14px;
        .title {
          font-size: 16px;
          font-weight: bold;
          padding: 10px;
          line-height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .empty{
          margin-top: 100px;
          color: #666666;
          font-size: 16px;
          text-align: center;
        }
        .group-item {
          padding-left: 15px;
          min-height: 40px;
          background: #fff;
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          color: #333;
          &.active {
            background-color: #e5e5e5;
            @include font-color($mainColor);
            .playbtn {
              display: inline-block;
            }
          }
          &.groupheader {
            background: #f7f7f8;
          }
          &:hover {
            .playbtn {
              display: inline-block;
            }
          }
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .group-name {
            display: inline-block;
            width: 90%;
            line-height: 1.2;
          }
          .grouppower {
            display: inline-block;
            width: 245px;
            text-align: right;
          }
          .playbtn {
            display: none;
            cursor: pointer;
            width: 20px;
          }
        }
      }
    }
    .el-main {
      padding: 0 0 0 10px;
    }
    .ts-con {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background: white;

      .ts {
        line-height: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -15px;
        margin-left: -110px;
        width: 210px;
        text-align: center;
        background: white;
        border-radius: 2px;
        box-shadow: 1px 1px 5px #e0dbdb;
        font-size: 14px;
        font-family: Microsoft Yahei In-Bold, Microsoft Yahei,
        Apple LiGothic Medium;
        color: #222222;
      }
    }
    .group-main {
      height: 100%;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .group-base-info {
        padding: 0 40px;
        background-color: #fff;
        min-height: calc(100vh - 140px);
        .group-info-item {
          margin: 10px 0;
          line-height: 1.5;
          &.center {
            text-align: center;
          }
          .label {
            color: #666;
          }
        }
        .group-logo {
          width: 100px;
          height: 100px;
        }
      }
    }

    .group-list,
    .left-wrap {
      &::-webkit-scrollbar {
        display: none;
      }
      .dialog-footer {
        text-align: center;
        padding-bottom: 20px;
      }
    }
  }
</style>
